<template>
  <div class="goodsAdmin_list" @click="hideEdit">
    <!-- 批量操作 -->
    <div class="allSelect">
      <div class="allSelect_left" @click="select_all">
        <img v-if="isAll" src="../../../static/image/someSelect_sure.png" alt>
        <img v-else src="../../../static/image/someSelect_defaul.png" alt>&nbsp;全选
      </div>
      <div class="allSelect_center">
        <!-- 占位 -->
      </div>
      <div class="allSelect_right" @click="setAllEdit">批量操作</div>
    </div>
    <!-- 批量操作end -->
    <div class="dataList_box">
      <div class="list" v-for="(item,index) in goodsList">
      <!-- s -->
      <div class="list_top" @click="SelectList(index)">
        <div class="list_top_left">
          <img v-if="!item.state" src="../../../static/image/someSelect_defaul.png" alt>
          <img v-else src="../../../static/image/someSelect_sure.png" alt>
        </div>
        <div class="list_top_goods_img">
          <div class="zan">
            <img v-if="index==0" src="../../../static/image/shopEdit_setGreat.png" alt>
          </div>
          <img class="goods_img" src="../../../static/image/goods1.jpg" alt>
        </div>
        <div class="list_top_right">
          <div class="list_top_right_box">
            <div class="list_top_right_box_name">
              <span>阿萨德哈就开始啊时间可达阿斯顿接口啊时间可达啊是看得见哈电话撒说的话阿斯顿接啊是看</span>
            </div>
            <div class="list_top_right_box_moeny">¥69.00</div>
            <div class="list_top_right_box_message">
              <div class="list_top_right_box_message_list">收藏:12893</div>
              <div class="list_top_right_box_message_list">销量:12893</div>
              <div class="list_top_right_box_message_list">库存:12893</div>
            </div>
          </div>
        </div>
      </div>
      <!-- e -->
      <div class="list_bot" @click.stop v-if="types==0">
        <!-- 操作 -->
        <div class="edit" v-if="item.edit">
          <div class="edit_list">首页推荐</div>
          <div class="edit_list">删除</div>
        </div>
        <!-- 操作 end -->
        <div class="list_bot_list">预览</div>
        <div class="list_bot_list">编辑</div>
        <div class="list_bot_list">下架</div>
        <div class="list_bot_list">分享</div>
        <div class="list_bot_list" @click="edit(index)">
          <i class="iconfont icongengduo"></i>
        </div>
      </div>

      <div class="list_bot" @click.stop v-else>
        <div class="list_bot_list">编辑</div>
        <div class="list_bot_list">上架</div>
        <div class="list_bot_list">删除</div>
      </div>
    </div>
    </div>
    <van-actionsheet v-model="show" :actions="actions" @select="onSelect" cancel-text="取消"/>
  </div>
</template>

<script>
export default {
  props: ["types", "isAll","goodsList"],
  data() {
    return {
      show: false,
      actions: [
        {
          name: "首页推荐"
        },
        {
          name: "取消推荐"
        },
        {
          name: "上架"
        },
        {
          name: "下架"
        },
        {
          name: "删除"
        }
      ],
      list: [
        {
          state: false,
          edit: false
        },
        {
          state: false,
          edit: false
        }
      ],
      
      inds: 0,
    };
  },
  mounted() {},
  methods: {
    // 批量操作
    setAllEdit() {
      let li = []
        for(let i in this.list){
          if(this.list[i].state){
            li.push(this.list[i])
          }
        }
        if(li.length>0){
          this.show = true;
        }else{
          this.$toast('请选择商品')
        }
        
    },
    onSelect(item) {
      // 点击选项时默认不会关闭菜单，可以手动关闭
      this.show = false;
      this.$toast(item.name);
    },
    // 多选
    SelectList(index) {
      this.$emit('SelectList',index)
      return
      this.list[index].state = !this.list[index].state;
      for (var i in this.list) {
        if (!this.list[i].state) {
          this.$emit("setAll", false);
          break;
        }
        if (parseInt(i) == this.list.length - 1) {
          this.$emit("setAll", true);
        }
      }
    },
    // 隐藏设置
    hideEdit() {
      this.list[this.inds].edit = false;
    },
    // 设置操作
    edit(index) {
      if (index != this.inds) {
        this.list[this.inds].edit = false; //默认把上一个打开的关闭
        this.inds = index;
      }
      this.list[index].edit = !this.list[index].edit;
    },
    // 全选
    select_all() {
      if (this.isAll) {
        this.$emit("setAll", false);
        for (var i in this.list) {
          this.list[i].state = false;
        }
      } else {
        this.$emit("setAll", true);
        for (var i in this.list) {
          this.list[i].state = true;
        }
      }
    }
  },
  watch: {
    types(data) {
      if(data==0){
        this.actions= [
        {
          name: "首页推荐"
        },
        {
          name: "取消推荐"
        },
        {
          name: "上架"
        },
        {
          name: "下架"
        },
        {
          name: "删除"
        }
      ]
      }else{
        this.actions= [
        {
          name: "上架"
        },
        {
          name: "删除"
        }
        ]
      }
      console.log(data);
    }
  },
  components: {}
};
</script>

<style scoped lang='less'>
.goodsAdmin_list {
  padding: 0.5rem 0;
  height: calc(100vh - 3.5rem - 60px - 20vw);

  .list {
    background: #fff;
    margin-bottom: 0.5rem;
    &:last-child {
      margin-bottom: 0;
    }
    .list_top {
      height: 25vw;
      width: 100%;
      padding: 0 1rem;
      padding-right: 0.5rem;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      border-bottom: 1px solid #efefef;
      transition: 0.4s;
      &:active {
        background: #efefef;
      }
      .list_top_left {
        height: 100%;
        width: 12%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        img {
          height: 1.5rem;
          width: 1.5rem;
        }
      }
      .list_top_goods_img {
        height: 100%;
        width: 25%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        position: relative;
        .goods_img {
          height: 20vw;
          width: 20vw;
          border-radius: 6px;
          box-shadow: 1px 1px 5px #efefef;
        }
        .zan {
          position: absolute;
          left: 0;
          top: 2.2vw;
          width: 1.5rem;
          height: 1.5rem;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
      .list_top_right {
        width: 63%;
        height: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .list_top_right_box {
          width: 100%;
          height: 20vw;
          .list_top_right_box_name {
            font-size: 0.7rem;
            height: 50%;
            span {
              .text(2);
            }
          }
          .list_top_right_box_moeny {
            font-size: 0.6rem;
            color: @actColor;
          }
          .list_top_right_box_message {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            color: #888;

            .list_top_right_box_message_list {
              flex: 1;
              font-size: 0.6rem;
            }
          }
        }
      }
    }
    .list_bot {
      height: 2.5rem;
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      font-size: 0.7rem;
      color: #888;
      position: relative;
      .edit {
        position: absolute;
        right: 0.5rem;
        top: 2rem;
        width: 5rem;
        height: 5rem;
        background: @color;
        color: #fff;
        font-size: 0.7rem;
        border-radius: 4px;
        z-index: 99;
        .edit_list {
          height: 50%;
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 4px;
          &:active {
            background: #1d1d1d;
          }
        }
      }
      .list_bot_list {
        flex: 1;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: 0.4s;
        &:active {
          background: #efefef;
        }
        .icongengduo {
          font-size: 1.1rem;
        }
      }
    }
  }
}
.dataList_box{
  height: calc(100% - 3rem);
  padding-top: .5rem;
  overflow-y: auto
}
.allSelect {
  height: 3rem;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 1rem;
  background: #fff;

  .allSelect_left {
    height: 100%;
    width: 30%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 0.8rem;
    img {
      height: 1rem;
      width: 1rem;
    }
  }
  .allSelect_center {
    width: 40%;
    height: 100%;
  }
  .allSelect_right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 0.8rem;
    height: 100%;
    width: 30%;
  }
}
</style>
